<%--
  Created by IntelliJ IDEA.
  User: HP
  Date: 2021/8/23
  Time: 14:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<script src="${pageContext.request.contextPath}/jquery.js"></script>
<script>
    $(function () {
        $.ajax({
            url: "/hotevents/show",
            data: {"currentPage":"1","keyWord":""},
            dataType: "JSON",
            type: "POST",
            success: function (res) {
                var tr = "";
                for (var temp of res.lists) {
                    tr += "  <tr class='base'><td><a href='${pageContext.request.contextPath}/hotevents/toDetail/"+temp.id+"'>" + temp.keyWord + "</a></td>  " +
                        "  <td>" + temp.searchSum + "</td>  " +
                        " <td>" + temp.keyWord + "</td></tr>";
                }
                $("#tbody").append($(tr))
                $("#totalCount").val(res.totalPage);
                $("#currentPage").val(res.currentPage);
            }
        })

        $("button").click(function(){
            $("#tbody").empty();
            var keyword = $("#keyWord").val().trim();
            var currentPage = $("#currentPage").val();

            $.ajax({
                url: "/hotevents/show",
                data: {"currentPage":currentPage,"keyWord":keyword},
                dataType: "JSON",
                type: "POST",
                success: function (res) {
                    var tr = "";
                    for (var temp of res.lists) {
                        tr += "  <tr class='base'><td><a href='${pageContext.request.contextPath}/hotevents/toDetail/"+temp.id+"'>" + temp.keyWord + "</a></td>  " +
                            "  <td>" + temp.searchSum + "</td>  " +
                            " <td>" + temp.keyWord + "</td></tr>";
                    }
                    $("#tbody").append($(tr))

                    $("#currentPage").val(res.currentPage);
                    $("#totalCount").val(res.totalPage);
                }
            })
        })


    });
    function jump(page){
        var currentPage = $("#currentPage").val();
        var totalCount = $("#totalCount").val();
        var keyWord = $("#keyWord").val();
        if(page == 1){
            currentPage =1;
        }else if (page == -1){
            currentPage = parseInt(currentPage)-1;
        }else if(page == -2){
            currentPage =  parseInt(currentPage)+1;
        }else{
            currentPage =totalCount;
        }
        console.log(totalCount);
        $.ajax({
            url: "/hotevents/show",
            data: {"currentPage":currentPage,"keyWord":keyWord},
            dataType: "JSON",
            type: "POST",
            success: function (res) {
                $("#tbody").empty();
                var tr = "";
                for (var temp of res.lists) {
                    tr += "  <tr class='base'><td><a href='${pageContext.request.contextPath}/hotevents/toDetail/"+temp.id+"'>" + temp.keyWord + "</a></td>  " +
                        "  <td>" + temp.searchSum + "</td>  " +
                        " <td>" + temp.keyWord + "</td></tr>";
                }
                $("#tbody").append($(tr))

                $("#currentPage").val(res.currentPage);
                $("#totalCount").val(res.totalPage);
            }
        })
    }
</script>
<body>


<p align="center" >

    <input placeholder="请输入热文信息" id="keyWord"/>
    <button>提交</button>
    <input type="hidden" name="currentPage" id="currentPage" />
    <input type="hidden" name="totalCount" id="totalCount" />
<h1> 热文信息 </h1>
</p>
<p align="center" style="width: 500px;background: grey">

</p>
<table border="1" align="center" cellpadding="0" cellspacing="0">
    <thead>
    <tr>
        <td>关键词</td>
        <td>访问量</td>
        <td>操作时间</td>
    </tr>
    </thead>
    <tbody id="tbody">

    </tbody>

</table>

<p align="center">
    <a href="javascript:jump('1');">首页</a>
    <a href="javascript:jump('-1');">上一页</a>
    <a href="javascript:jump('-2');">下一页</a>
    <a href="javascript:jump('-3');">尾页</a>
</p>

</body>
</html>
